<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Omiu REPL</title>
  <link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
  <link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
  <style>
    .cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
    </style>

  <style>
    .editor{
            overflow: hidden;
        }
        
    .tool-bar{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
    }

    ::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
      width: 12px;
      height: 12px;
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #555;
    }

    @media screen and (max-width: 768px) {  
          .playground {
            display: block;
          }

        .playground .editor{
          position: absolute;
          top: 40%;
          width: 100%;
          height: 60%;
          
        }

        .playground .preview{
          display: inline-block;
          width: 100%;
          height: 40%;
          position: absolute;
          top:0px;
        }
    }
  </style>
</head>

<body>
  <!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
    <img src="https://alloyteam.github.io/github.png" alt="" />
  </a> -->
  <div class="container">
    <div class="tool-bar" style="display:none;">
      <button style="margin-left:20px;" onclick="run()">Run</button>
      <div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
          for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
    </div>
    <div class="playground">
      <div class="editor">
        <textarea id="editor">define('my-app', class extends WeElement {

  showPicker = false

  selectedDate = '2019-1-10'
  
  onToggle = () => {
    this.showPicker = !this.showPicker
    this.update()
  }

  onSelect = (date) => {
    this.selectDate = date
    this.showPicker = false
    this.update()
  }


  render() {
    return (
      <o-date-picker
        selectedDate={this.selectedDate}
        onSelect={this.onSelect}
        show={this.showPicker}
        onToggle={this.onToggle}>
      </o-date-picker>
    )
  }
})

render(<my-app />, 'body')</textarea>
      </div>
      <div class="preview">
        <iframe class="frame" id="frame"></iframe>
      </div>

    </div>

    <div class="notification hide" id="notification">
      <pre class="notification-content" id="notification-content"></pre>
    </div>
  </div>

  <script src="./libs/babel.min.js"></script>
  <script src="./libs/codemirror.js"></script>
  <script src="./libs/xml.js"></script>
  <script src="./libs/javascript.js"></script>

  <script>
    var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
      sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
      storageKey = "alloyrender_playground_source",
      myTextarea = document.getElementById("editor"),
      editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
      source = sourceFromQueryString || lastStorageSource || editor.getValue();
    "dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";

    function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
    function hideNotify() { notification.classList.add("hide") }
    function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
    function runCompiled(a) {
      var c, b = frame.contentDocument.body;
      lastScript && b.removeChild(lastScript);
      c = document.createElement("script");
      c.innerHTML = a;
      window._sourceCode = a
      lastScript = c;
      b.appendChild(c)
    }

    function compile(a, b) {
      var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
      window._sourceCode = d
      return d;
      //return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
    }

    function run() {
      frame.contentWindow.location.reload(true);
    }



    editor.on("changes", function (a) {
      var b = a.getValue();
      compile(b);
      //localStorage.setItem(storageKey,b);
      if (document.querySelector('#autoCheckbox').checked) {
        frame.contentWindow.location.reload(true);
      }
      // window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
    });
  </script>
</body>

</html>